<template>
	<view class="product">

		<!-- <HeaderNav></HeaderNav> -->

	  <view style="z-index:999;position: fixed;">
			<header-bar :isBack="true" title="产品详情" titleTintColor="#000000"  :bgColor="{background: '#ffffff'}" >
			 <text slot="back" class="uni_btnIco myicon myicon-zuojiantou" style="" ><</text>
			</header-bar>
		</view>

		<view class="rf-header-box"  :style="{paddingTop: 90 + 'rpx' }">
			<view class="rf-header flex-row" :style="{width:width+'px',height:height+'px'}">
				<!-- 	<view class="rf-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
						<text class="iconfont iconzuo"></text>
					</view> -->
				<view class="input-box"  style="flex:1; min-width:0;" :style="{marginTop:inputTop+'px'}">
					<input
						v-model="keyword"
						@confirm="search"
						placeholder="请输入关键字"
						placeholder-style="font-size: 24upx; color:#ccc;"
						type="text" />
					<text class="icon iconfont iconsousuo2" @tap.stop="search"></text>
				</view>
				<view class="search-ad" :style="{marginTop:inputTop+'px'}">

					<view class="rf-top-item rf-icon-ml" @tap="screen" data-index="3">
						<text>筛选</text>
						<!--<rf-icon name="screen" :size="12" color="#333" rf-icon-class="rf-ml" :bold="true"></rf-icon>-->
					</view>

					<!-- <view class="rf-top-item" @tap="screen" data-index="2">
						<text class="iconfont" :class="isList>0? 'iconliebiaoqiehuan':'iconfenlei'"></text>
					</view> -->

				</view>



			</view>
		</view>

		<rf-product-detail @product="getProductDetail" :userInfo="userInfo" :url="currentUrl" :product="productDetail"></rf-product-detail>
    <!--回到顶部-->
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
		<!-- 404页面 -->
		<view v-if="!productDetail.name && !loading">
			<rf-no-data :custom="true">
				<view class="no-data-title">
					{{ errorInfo || '暂无数据' }}
				</view>
				<view
					@tap="getProductDetail(productDetail.id)"
					slot="refresh"
					class="spec-color"
					>重新加载</view
				>
			</rf-no-data>
		</view>
		<!--顶部下拉菜单-->
		<rf-nav-detail
			@hide="hideNavDetail"
			:popupShow="navDetailShow"
		>
		</rf-nav-detail>
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<tabBar></tabBar>
	</view>
</template>
<script>
/**
 * @des 商品详情
 *
 * @author stav stavyan@qq.com
 * @date 2020-03-23 15:04
 * @copyright 2019
 */
	import HeaderNav from '@/components/header-nav/product.vue';
		import HeaderBar from '@/components/header-nav/productNew.vue';
import { productDetail } from '@/api/product';
import rfProductDetail from '@/components/rf-product-detail';
import rfBackTop from '@/components/rf-back-top';
import rfNoData from '@/components/rf-no-data';
export default {
	components: {
		rfProductDetail,
		rfBackTop,
		rfNoData,
		HeaderNav,
		HeaderBar
	},
	data() {
		return {
			cates:{},
			recommends:{},
			productDetail: {},
			loading: true,
			errorInfo: '',
			userInfo: {},
			scrollTop: 0,
			currentUrl: '',
			navDetailShow: false,
			appName: this.$mSettingConfig.appName
		};
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navDetailShow = true;
		}
	},
	// #endif
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	async onLoad(options) {
		this.productId = options.id;
		this.userInfo = uni.getStorageSync('userInfo') || {};
		await this.initData();
	},
	methods: {
			// 复制商品信息到剪切板
			copyProductInfo(item) {
				// 处理HTML标签：将<br>替换为换行符，去掉其他HTML标签
				const cleanIntro = this.cleanHtmlTags(item.intro_h5 || item.intro || '暂无描述');

				const info = `产品名称：${item.name}\n
			  货号：${item.skustr}\n
			  产品详情地址：https://www.enkilife.cn/h5/#/pages/product/product?id=${item.id}\n
			  产品说明书地址：${item.document || '暂无'}\n
			  商品描述：${cleanIntro}`;



			// const info = `名称：${item.name}\n简介：${item.sketch}\n型号：${item.model || item.sn || item.code || '-'}\n价格：￥${item.price}\n范围：${item.range || '1-1000pg/mL'}\n灵敏度：${item.sensitivity || '35pg/mL'}`;
			// #ifdef H5
			if (navigator && navigator.clipboard && window.isSecureContext) {
				navigator.clipboard.writeText(info).then(() => {
					this.copySuccessDialog = true;
							uni.showToast({ title: '已复制', icon: 'none' });
				}).catch(() => {
					this._fallbackCopyTextToClipboard(info);
				});
			} else {
				this._fallbackCopyTextToClipboard(info);
			}
			// #endif

			// #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
			uni.setClipboardData({
				data: info,
				success: () => {
					this.copySuccessDialog = true;
							uni.showToast({ title: '已复制', icon: 'none' });
				},
				fail: () => {
					uni.showToast({ title: '复制失败', icon: 'none' });
				}
			});
			// #endif
		},
		// copyProductInfo(item) {
		// 	  const info = `名称：${item.name}\n简介：${item.sketch}\n型号：${item.model || item.sn || item.code || '-'}\n价格：￥${item.price}\n范围：${item.range || '1-1000pg/mL'}\n灵敏度：${item.sensitivity || '35pg/mL'}`;
		// 	  // #ifdef H5
		// 	  if (navigator && navigator.clipboard) {
		// 	    navigator.clipboard.writeText(info).then(() => {
		// 	      this.copySuccessDialog = true;
		// 	    }, () => {
		// 	      uni.showToast({ title: '复制失败', icon: 'none' });
		// 	    });
		// 	  } else {
		// 	    // 兼容老浏览器
		// 	    const textarea = document.createElement('textarea');
		// 	    textarea.value = info;
		// 	    document.body.appendChild(textarea);
		// 	    textarea.select();
		// 	    try {
		// 	      document.execCommand('copy');
		// 	      this.copySuccessDialog = true;
		// 	    } catch (err) {
		// 	      uni.showToast({ title: '复制失败', icon: 'none' });
		// 	    }
		// 	    document.body.removeChild(textarea);
		// 	  }
		// 	  // #endif

		// 	  // #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
		// 	  uni.setClipboardData({
		// 	    data: info,
		// 	    success: () => {
		// 	      this.copySuccessDialog = true;
		// 	    },
		// 	    fail: () => {
		// 	      uni.showToast({ title: '复制失败', icon: 'none' });
		// 	    }
		// 	  });
		// 	  // #endif
		// 	},
		// 隐藏顶部导航
		hideNavDetail() {
			this.navDetailShow = false;
		},
		// 数据初始化
		async initData() {
      if (this.userInfo.promo_code) {
        this.currentUrl = `${this.$mConfig.hostUrl}/pages/product/product?id=${this.productId}&promo_code=${this.userInfo.promo_code}`;
      } else {
        this.currentUrl = `${this.$mConfig.hostUrl}/pages/product/product?id=${this.productId}`;
      }
			this.hasLogin = this.$mStore.getters.hasLogin;
			await this.getProductDetail();
		},
		// 获取产品详情
		async getProductDetail() {
			await this.$http
				.get(`${productDetail}`, {
					id: this.productId
				})
				.then(async r => {
					this.loading = false;
				this.cates = r.data.cates;
										this.recommends = r.data.recommends;

									this.productDetail = r.data.model;
									console.log(	this.productDetail.name)
					uni.setNavigationBarTitle({ title: this.productDetail.name });

					await this.$mHelper.handleWxH5Share(this.appName, r.data.name, this.currentUrl, r.data.picture);
				})
				.catch(err => {
					this.loading = false;
					this.errorInfo = err;
				});
		},
		// 清理HTML标签：将<br>替换为换行符，去掉其他HTML标签
		cleanHtmlTags(htmlString) {
			if (!htmlString) return '';

			// 将<br>、<br/>、<br />等标签替换为换行符
			let cleanText = htmlString.replace(/<br\s*\/?>/gi, '\n');

			// 去掉所有其他HTML标签
			cleanText = cleanText.replace(/<[^>]*>/g, '');

			// 解码HTML实体
			cleanText = cleanText.replace(/&nbsp;/g, ' ');
			cleanText = cleanText.replace(/&lt;/g, '<');
			cleanText = cleanText.replace(/&gt;/g, '>');
			cleanText = cleanText.replace(/&amp;/g, '&');
			cleanText = cleanText.replace(/&quot;/g, '"');
			cleanText = cleanText.replace(/&#39;/g, "'");

			// 清理多余的空白字符，但保留换行符
			cleanText = cleanText.replace(/[ \t]+/g, ' ').trim();

			return cleanText;
		}
	}
};
</script>
<style scoped lang="scss">
page {
	background: $page-color-base;
}
.rf-header-box {
	width: 100%;
	background: $color-white;
	// position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	.rf-header {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		box-sizing: border-box;

		.rf-back {
			margin-left: 8upx;
			height: 32px !important;
			width: 32px !important;
			display: flex;
			justify-content: center;
			align-items: center;
			.iconzuo {
				font-size: $font-lg + 4upx;
				font-weight: 500;
				color: $font-color-dark;
			}
		}
	}
	.input-box {
		flex: 1;
		min-width: 0;
		font-size: 32rpx;
		box-sizing: border-box;
		color: #333;
		display: flex;
		align-items: center;
		overflow: hidden;
		height: 90rpx;
		background: rgba(255,255,255,0.95);
		border-radius: 16rpx;
		position: relative;
		margin: 0 10rpx 0 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
		.iconsousuo2 {
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			height: 90rpx;
			font-size: 36rpx;
			color: #fff;
			background: #e53935;
			border-radius: 0 16rpx 16rpx 0;
			margin: 0;
			padding: 0;
		}
		input {
			width: 100%;
			padding: 0 20rpx;
			height: 90rpx;
			color: #333;
			font-size: 32rpx;
			border: none;
			background: transparent;
			margin: 0;
			line-height: 90rpx;
		}
	}
}
</style>
